<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cate</title>
    <link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../css/wu.css" />
    <link rel="stylesheet" type="text/css" href="../css/icon.css" />
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../easyui/1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
            <ul id="tt" class=""></ul>

            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRootNode()" plain="true">添加根节点</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="editNode()" plain="true">修改</a>
            <a href="javascript:;void(0)" class="easyui-linkbutton" onclick="remove()">删除</a>
            
        </div>
        <div data-options="region:'center',title:'Main Title',border:false,iconCls:'icon-ok'">
        
    	<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input type="text" name="parentId" id="parentId">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Title:',required:true">
            </div>
            
        </form>

        <div style="text-align: center;padding: 5px 0">
            <a href="javascript:;void(0)" class="easyui-linkbutton" onclick="submitForm()">submit</a>
            <a href="javascript:;void(0)" class="easyui-linkbutton" onclick="clearForm()" >clear</a>
        </div>

        <table id="dg"></table>
        <a href="javascript:;void(0)" class="easyui-linkbutton" onclick="addTab('发布新闻','news/news.html',null,1)">发布新闻</a>
    </div>
    <!-- End of easyui-dialog -->

    

    <script type="text/javascript">
    	/**
    	* Name 载入菜单树
    	*/

        var nodeId=null;
    	$('#tt').tree({
            animate:true,
            url:"http://localhost:3000/cate/list",
            method:'get',
            onClick: function(node){
                $('#parentId').val(node._id); 
            }
        });

    	
    	function remove(){
    		var node=$('#tt').tree('getSelected');
            //console.log(node._id)
            var id=node._id;

            $.ajax({
                type:"delete",
                url:"http://localhost:3000/cate/data/"+id,
            }).then(function(res){
                $('#tt').tree('reload');
            })
    	}

        function addRootNode(){
               $('#parentId').val(null);
        }
        
        function editNode(){
            var node=$('#tt').tree('getSelected');

            nodeId=node._id;
            console.log(nodeId)
            $('#ff').form('load',node);
        }

        
    	

        function submitForm(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if ($(this).form('enableValidation').form('validate')){
                        var postUrl;
                        if(nodeId!==null){
                            postUrl="http://localhost:3000/cate/data/"+nodeId;
                        }else{
                            postUrl="http://localhost:3000/cate/data";
                        }
                        var formData=$('#ff').serializeJSON();
                        //console.log(formData)
                        if(formData.parentId.length===0){
                            delete formData.parentId;
                        }

                        $.ajax({
                            type:"post",
                            url:postUrl,
                            data:formData                        
                        }).then(function(res){
                            //console.log(res)
                            $('#tt').tree('reload');

                        });
                    }else{
                        alert('验证失败')
                    }
                }

            });
            
        }

        function clearForm(){
            $('#ff').form('clear');
        }

        $('#dg').datagrid({
            url:'http://localhost:3000/news/list',
            method:'get',
            columns:[[
                {field:'text',title:'分类',width:100},
                {field:'author',title:'作者',width:100},
                {field:'title',title:'标题',width:100},
                {field:'viceTitle',title:'副标题',width:100},
                {field:'content',title:'内容',width:100},
                {field:'operate',title:'管理',
                formatter: function(value,row,index){
                    return '<a href="javascript:;void(0)" id="edit" class="easyui-linkbutton">修改</a> '+
                    '<a href="javascript:;void(0)" id="comment" class="easyui-linkbutton" onclick="comment()">评论</a>'
                }
            }

            ]]
        });

       function comment(){
            window.location.href='../comment/comment.html'
       }

        function addTab(title, href, iconCls, iframe){
            var tabPanel = window.parent.$('#wu-tabs');
            if(!tabPanel.tabs('exists',title)){
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
                if(iframe){
                    tabPanel.tabs('add',{
                        title:title,
                        content:content,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
                else{
                    tabPanel.tabs('add',{
                        title:title,
                        href:href,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
            }
            else
            {
                tabPanel.tabs('select',title);
            }
        }
    	
    </script>

</body>
</html>